<template>
  <view class="Water">
    <mineNavbar :styleData="styleData" />

    <scroll-view class="scroll" scroll-y>
      <view class="logo">
        <image
          class=""
          src="../../../../static/images/cancellation/cancellationLogo.png"
          mode="aspectFit|aspectFill|widthFix"
          lazy-load="false"
          binderror=""
          bindload="" />
        <view class="desc"> 期待与您再次相遇 </view>
      </view>

      <view class="form">
        <view class="verify">
          <view class="v_input">
            <view class="inp-item">
              <image src="@/static/images/recruit/user.png" />
              <input
                type="text"
                v-model="phonenumber"
                placeholder="请输入手机号码" />
            </view>
            <view class="inp-item">
              <image src="@/static/images/recruit/user1.png" />
              <input
                type="text"
                v-model="smsCode"
                placeholder="请输入短信验证码" />
              <view @click="getCode" v-if="isShowSeconds">获取验证码</view>
              <view class="anew" v-else>{{ seconds }}s重新获取</view>
            </view>
          </view>
        </view>
      </view>

      <view class="btn">确认注销 </view>

      <view class="consent">
        <text class="text" selectable="false" space="false" decode="false">
          <label class="radio"><radio value="r2" />未选中</label>
          我已阅读并同意《账号注销协议》
        </text>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import { captchaSms } from "@/api/login.js";
export default {
  components: {},
  data() {
    return {
      styleData: {
        show: true,
        tabbarText: "账号注销",
      },

      //手机号
      phonenumber:'',
      // 倒计时
      seconds: 3,
      // 状态
      isShowSeconds:true
    };
  },
  computed: {},
  // 监控data中的数据变化
  watch: {},
  onLoad(options) {},
  onShow() {},
  onReady() {},
  methods: {
    toPath(path) {
      if (path === "") return;

      uni.navigateTo({
        url: `/${path}`,
      });
    },

    confirm() {},

    // 重新获取验证码
    getCode() {
      let timer = "";
      this.isShowSeconds = false;
      var that = this;
      that.getCaptchaSms();
      timer = setInterval(() => {
        that.seconds = that.seconds - 1;
        if (that.seconds === 0) {
          clearInterval(timer);
          (that.isShowSeconds = true), (that.seconds = 60);
        }
      }, 1000);
    },
    getCaptchaSms() {
      let phonenumber = this.phonenumber;
      captchaSms({
        phonenumber,
      }).then((res) => {
        if (res.code == 200)
          uni.showToast({
            title: "验证码已发送！",
            icon: "none",
          });
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.Water {
  height: 100vh;
  width: 100%;
  background-color: #ffffff;

  .scroll {
    width: 100%;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 32rpx;

    .logo {
      margin-top: 150rpx;
      margin-left: 94rpx;
      margin-bottom: 114rpx;
      image {
        width: 170rpx;
        height: 48rpx;
        margin-bottom: 8rpx;
      }

      .desc {
        font-family: SourceHanSansCN-Medium;
        font-weight: 500;
        font-size: 32rpx;
        color: #00000073;
        letter-spacing: 0;
        line-height: 46rpx;
      }
    }

    .form {
      .code {
        font-family: PingFangSC-Medium;
        font-weight: 500;
        font-size: 28rpx;
        color: #317ed0;
        letter-spacing: 0;
        text-align: right;
        padding-right: 32rpx;
      }

      .input {
        margin-bottom: 24rpx;
        ::v-deep .uni-easyinput__content {
          height: 106rpx;
          border: 1rpx solid #e2e2e2;
          border-radius: 24rpx;
        }
      }
    }

    .btn {
      width: 420rpx;
      height: 90rpx;
      line-height: 88rpx;
      background: #ff9e24;
      border-radius: 44rpx;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 32rpx;
      color: #ffffff;

      text-align: center;
      margin: 0 auto;
      margin-top: 450rpx;
      margin-bottom: 32rpx;
    }
    .consent {
      width: 368rpx;
      margin: 0 auto;

      .text {
        color: #000000a3;
        font-size: 24rpx;
        font-face: PingFangSC;
        font-weight: 500;

        text-align: right;
      }
    }
  }

  .verify {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    // position: absolute;
    // top: 646rpx;
    // left: 0;

    .v_input {
      width: 562rpx;

      .inp-item {
        height: 106rpx;
        background: #ffffff;
        border: 1px solid #e2e2e2;
        border-radius: 24rpx;
        display: flex;
        align-items: center;
        font-size: 28rpx;
        margin-bottom: 24rpx;

        image {
          width: 32rpx;
          height: 32rpx;
          padding: 0 10px;
        }

        .anew {
          color: #317ed0;
        }
      }
    }
  }
}
</style>
